<template>
  <div class="decoration-wrap">
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="colors[0]"
        points="10, 0 19, 10 10, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="colors[1]"
        points="2, 0 11, 10 2, 20"
      />
    </svg>
    <slot />
    <svg width="21px" height="20px">
      <polyline
        stroke-width="4"
        fill="transparent"
        :stroke="colors[0]"
        points="11, 0 2, 10 11, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="colors[1]"
        points="19, 0 10, 10 19, 20"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'HzxDecoration',
  props: {
    colors: {
      type: Array,
      default: () => (['#1dc1f5', '#1dc1f5'])
    }
  }
}
</script>
<style lang="less" scoped="scoped">
    .decoration-wrap {
     display: flex;
     width: 100%;
     height: 100%;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
}
</style>
